<template>
  <van-tabs v-model:active="formData.active" @click-tab="change">
    <van-tab title="支付宝">
      <van-cell-group inset>
        <van-field v-model="formData.alipayAccount" type="tel" placeholder="请输入支付宝账号" />
        <van-field v-model="formData.alipayName" placeholder="请输入真实姓名" />
      </van-cell-group>

    </van-tab>
    <van-tab title="微信">
      <van-cell-group inset>
        <van-field v-model="formData.weixinAccount" type="tel" placeholder="请输入微信账号" />
        <van-field v-model="formData.weixinName" placeholder="请输入真实姓名" />
      </van-cell-group>
    </van-tab>
    <van-tab title="银行卡">
      <van-cell-group inset>
        <van-field v-model="formData.bankAccount" type="tel" placeholder="请输入银行卡号" />
        <van-field v-model="formData.bankName" placeholder="请输入开户银行" />
        <van-field v-model="formData.bankSubName" type="tel" placeholder="请输入开户支行" />
        <van-field v-model="formData.bankUserName" placeholder="请输入真实姓名" />
      </van-cell-group>
    </van-tab>
    <!-- <van-tab title="USDT">
      <van-cell-group inset>
        <van-field v-model="formData.usdtAddr" type="tel" placeholder="请输入USDT地址" />
        <van-field v-model="formData.usdtType" placeholder="请输入开户银行" readonly />
      </van-cell-group>
    </van-tab> -->
  </van-tabs>
  <van-button type="primary" block class="bind" :loading="formData.loading" @click="submit"> 立即绑定</van-button>
  <setPwd ref="pwdShow" :paydata="setData" />
</template>
<script>
import { computed, ref, reactive, onMounted } from 'vue'
import { useStore } from "vuex";
import { editPay, getCode, imgcode } from "@/api/user";
import { Dialog, Toast } from "vant";
import { useRouter } from 'vue-router'
import setPwd from "@/components/setPwd.vue";
import { stringNum, formatPhoneNumber } from "@/utils/phone";
import SetPwd from '../../../components/setPwd.vue';
export default {
  components: { setPwd },
  setup(props) {
    const store = useStore();
    const router = useRouter()
    const user_info = computed(() => {
      return store.getters.user_info
    })
    const formData = reactive({
      loading: false,
      active: 0,
      usdtType: "波场链",
      usdtAddr: store.getters.user_info.usdtAddr,
      bankUserName: store.getters.user_info.bankUserName,
      bankSubName: store.getters.user_info.bankSubName,
      bankName: store.getters.user_info.bankName,
      bankAccount: store.getters.user_info.bankAccount,
      alipayAccount: store.getters.user_info.alipayAccount,
      alipayName: store.getters.user_info.alipayName,
      weixinAccount: store.getters.user_info.weixinAccount,
      weixinName: store.getters.user_info.weixinName
    })
    const setData = ref({
      bankUserName: formData.bankUserName,
      bankSubName: formData.bankSubName,
      bankName: formData.bankName,
      bankAccount: formData.bankAccount,
      alipayAccount: formData.alipayAccount,
      alipayName: formData.alipayName,
      weixinAccount: formData.weixinAccount,
      weixinName: formData.weixinName,
      usdtAddr: formData.usdtAddr
    })
    const pwdShow = ref(null)
    const submit = async () => {
      setData.value = {
        bankUserName: formData.bankUserName,
        bankSubName: formData.bankSubName,
        bankName: formData.bankName,
        bankAccount: formData.bankAccount,
        alipayAccount: formData.alipayAccount,
        alipayName: formData.alipayName,
        weixinAccount: formData.weixinAccount,
        weixinName: formData.weixinName
      }
      pwdShow.value.open = true
      // const res = await editPay(formData)
      // console.log(res)
    }
    const change = (e) => {
      // console.log(e.name == formData.active)
    }
    onMounted(() => {
      if (router.currentRoute.value.query.type) {
        formData.active = Number(router.currentRoute.value.query.type)
      }

    })

    return {
      user_info,
      setData,
      submit,
      formData,
      change,
      pwdShow
    }

  }
}
</script>
<style lang="less" scoped>
&:deep(.van-tabs__nav) {
  background: transparent;
  margin: 0px 20px;
}

&:deep(.van-tab) {
  font-size: 31px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.8;
}

&:deep(.van-tab--active) {
  .van-tab__text {
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #3d94ff;
    // line-height: 30px;

    background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

&:deep(.van-tabs__line) {
  background: url('../../../assets/image/tab-active.png');
  background-size: 100% 100%;
  bottom: 40px !important;
}

&:deep(.van-cell-group) {
  margin: 56px 30px 0px;
  background: transparent;
  min-height: 520px;
}

&:deep(.van-cell) {
  height: 100px;
  background: #282a2c;
  border: 1px solid #999;
  border-radius: 18px;
}

&:deep(.van-field__control) {
  font-size: 30px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #b9c4c7;
  opacity: 0.8;
}

.bind {
  border: none;
  width: 682px;
  height: 92px;
  background: linear-gradient(-90deg, #37dc6d, #34d1f9);
  border-radius: 46px;
  font-size: 36px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ffffff;
  line-height: 48px;
  margin: 50px auto;
}
</style>